import React, { useState, createContext } from 'react'

// 创建上下文空间 （provider, consumer
const NumContext = createContext()
// function Father (){
//     return <Child />
// }
const Father = ()=> <Child />
function Child (){
    return (
        <>
        <NumContext.Consumer>
            {
                ({num,setNum})=>{
                    return (
                        <>
                        <h2>{num}</h2>
                        <button onClick={()=>setNum(456)}>修改</button>
                        </>
                    ) 
                }
            }
        </NumContext.Consumer>
        </>
    )
}
// 顶级组件
export default function App3() {
    const [num,setNum]=useState(324);
  return (
    <NumContext.Provider value={{num,setNum}}>
        <Father />
    </NumContext.Provider>
  )
}
 